<template>
  <div style="background-color: white;">
    <div class="flex">
      <div class="box-title">
        <div class="vertical-line vertical-line-black" />
        <span class="title-span title">热点图文</span>
      </div>
    </div>
    <div class="content">
      <div class="text-box flex" v-for="item in imgList" :key="item.id">
        <img :src="item.img" :alt="item.title">
        <div class="box-right">
          <div class="title-span">{{ item.title }}</div>
          <div class="time">
            <span class="time-dis">{{ item.distanceTime }}</span>
            <span class="time-sec">{{ item.updateTimeInSecond }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { imgList } from './data'
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
